{% extends "layout.html" %}
{% load static %}

{% block css_m %}

{% endblock %}
{% block js_m %}
    {#    <script type="text/javascript" src="{% static '/js/echarts.min.js' %}"></script>#}

{% endblock %}

{% block content_body %}
    <div class="container center-block" style="margin-top: 50px;background-color: #e7e7e7;border-radius: 10px;" >
    <div class="row" style="margin-top: 20px">
        <div class="col-md-2"><img class="img-responsive img-circle" src="/bgimage/logo.jpg" style="height: 150px;width: 150px"></div>
        <div class="col-md-8" >
            <div class="col-md-12"><h1 class="text-warning ">龚庭鼻炎馆-南阳店</h1></div>
            <div class="col-md-12"><h4 class="text-warning">{{ epigram }}</h4></div>
        </div>
    </div>
        <div class="panel panel-warning" style="margin-top: 20px">
            <div class="panel-heading">最近30天进店客户数</div>
            <div class="panel-body">
                <div id="main" style="width: 100%;height:300px;"></div>
            </div>
        </div>
    <div class="panel panel-warning" >
            <div class="panel-heading">最近30天购买客户数</div>
            <div class="panel-body">
                <div id="main_buying" style="width: 100%;height:300px;"></div>
            </div>
        </div>


    </div>





{% endblock %}

{% block content_bottom %}
    <script type="text/javascript" src="{% static '/js/highcharts.js' %}"></script>
    <script type="text/javascript">
        Highcharts.setOptions(
            {
                global: {
                    useUTC: false
                }
            }
        );
        $(function () {
            initChart();
        })


        // 基于准备好的dom，初始化echarts实例

        function initChart() {


            // 指定图表的配置项和数据
            var config = {
                title: {
                    text: null
                },

                legend: {
                    enabled: false
                },
                credits: {
                    enabled: false
                },
                yAxis: {
                    title: {
                        text: '客户数量/天'
                    }
                },
                xAxis: {
                    type: 'datetime',
                    tickInterval: 60 * 60 * 24 * 1000,
                    labels: {
                        formatter: function () {
                            return Highcharts.dateFormat('%m-%d', this.value);
                        },
                        rotation: -30
                    }

                },

                tooltip: {
                    headerFormat: '<b>{point.key}</b><br>',
                    pointFormat: '<span style="color:{series.color}">\u25CF</span>客户数：{point.y}',
                    xDateFormat: '%Y-%m-%d',

                },
                plotOptions: {
                    area: {
                        stacking: 'normal',
                        lineColor: '#666666',
                        lineWidth: 1,
                        marker: {
                            lineWidth: 1,
                            lineColor: '#666666'
                        }
                    },
                    line: {
                        dataLabels: {
                            enabled: true
                        }
                    }
                },
                series: [{
                    data: [],
                    lineWidth: 5,
                    zones: [{
                        value: 1,
                        color: '#7cb5ec',
                        dashStyle: 'dot'
                    }, {
                        value: 5,
                        color: '#90ed7d'
                    }, {
                        color: '#f7a35c'
                    }]
                }
                ]
            };
            var config_buying = {
                title: {
                    text: null
                },

                legend: {
                    enabled: false
                },
                credits: {
                    enabled: false
                },
                yAxis: {
                    title: {
                        text: '购买数量/天'
                    }
                },
                xAxis: {
                    type: 'datetime',
                    tickInterval: 60 * 60 * 24 * 1000,
                    labels: {
                        formatter: function () {
                            return Highcharts.dateFormat('%m-%d', this.value);
                        },
                        rotation: -30
                    }

                },

                tooltip: {
                    headerFormat: '<b>{point.key}</b><br>',
                    pointFormat: '<span style="color:{series.color}">\u25CF</span>购买数：{point.y}',
                    xDateFormat: '%Y-%m-%d',

                },
                plotOptions: {
                    area: {
                        stacking: 'normal',
                        lineColor: '#666666',
                        lineWidth: 1,
                        marker: {
                            lineWidth: 1,
                            lineColor: '#666666'
                        }
                    },
                    line: {
                        dataLabels: {
                            enabled: true
                        }
                    }
                },
                series: [{
                    data: [],
                    lineWidth: 5,
                    zones: [{
                        value: 1,
                        color: '#7cb5ec',
                        dashStyle: 'dot'
                    }, {
                        value: 5,
                        color: '#90ed7d'
                    }, {
                        color: '#f7a35c'
                    }]
                }
                ]
            };


            $.ajaxSetup({

                data: {csrfmiddlewaretoken: '{{ csrf_token }}'},

            });
            $.ajax({
                    url: '{% url "chart_test_p_day" %}',
                    type: 'get',

                    dataType: 'JSON',
                    success: function (arg) {

                        config.series[0].data = arg.data["data_list"]
                        config_buying.series[0].data = arg.data["data_list_buying"]
                        $("#main").highcharts(config)
                        $("#main_buying").highcharts(config_buying)


                    }

                }
            );
        }
    </script>
{% endblock %}